import 'package:flutter/material.dart';
import 'package:flutter_app/components/layout.dart';
import 'package:flutter_app/utils/AppUtil.dart';
import 'package:flutter_app/generated/l10n.dart';

class InvestPage extends StatefulWidget {
  @override
  _InvestPageState createState() => _InvestPageState();
}

Widget CoinItemContainer(context, String text, {String img}) {
  return Container(
    width: (MediaQuery.of(context).size.width - 30) / 4,
    child: Column(
      children: [
        Image.asset(
          img ?? '',
          width: 50,
        ),
        SizedBox(
          height: 8,
        ),
        Text(
          text,
          style: TextStyle(fontSize: 11),
        )
      ],
    ),
  );
}

Widget TagContainer(
    {Function onPressed, String text, Color color, bool isActive = false}) {
  return FlatButton(
      onPressed: onPressed,
      minWidth: 55,
      height: 26,
      color: isActive ? color : Colors.grey.withOpacity(0.06),
      textColor: isActive ? Colors.white : color,
      shape: StadiumBorder(),
      child: Text(text));
}

Widget ProductHead({String title, String subTitle, Color color}) {
  return ColumnStart(
    children: [
      Row(
        children: [
          SizedBox(
            width: 4,
            height: 15,
            child: DecoratedBox(
              decoration: BoxDecoration(color: color),
            ),
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            title ?? "",
            style: TextStyle(
                fontSize: 20,
                fontFamily: 'STHeiti',
                fontWeight: FontWeight.w500),
          ),
        ],
      ),
      Container(
          margin: EdgeInsets.only(top: 4),
          padding: EdgeInsets.only(left: 15),
          child: Text(
            subTitle ?? "",
            style: TextStyle(fontSize: 12, color: Colors.black54),
          )),
    ],
  );
}

Widget GreyText(String text) {
  return Text(
    text,
    style: TextStyle(color: Colors.grey, fontSize: 12),
  );
}

Widget CoinOptionContainer(context,
    {Color color, String profit, String pegged, String limit, Function onTap}) {
  return InkWell(
    onTap: onTap,
    child: Container(
      padding: EdgeInsets.symmetric(vertical: 15.0),
      decoration: BoxDecoration(
          border:
              Border(bottom: BorderSide(width: 1, color: Colors.grey[200]))),
      child: RowBetween(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          ColumnStart(
            children: [
              Row(
                children: [
                  Text(
                    profit,
                    style: TextStyle(
                        fontSize: 23, color: color, fontWeight: FontWeight.bold),
                  ),
                  Text('%',style: TextStyle(fontSize: 18, color: color, fontWeight: FontWeight.bold,fontFamily: 'dinpro'),)
                ],
              ),
              //年化收益率
              GreyText(S.of(context).annualizaed),
            ],
          ),
          ColumnStart(
            children: [
              Text(
                pegged,
                style: TextStyle(
                    fontSize: 18,
                    color: Colors.black,
                    fontWeight: FontWeight.w500,
                    fontFamily: 'dinpro'
                ),
              ),
              //linked_price 挂钩价
              GreyText(S.of(context).linked_price),
            ],
          ),
          ColumnStart(
            children: [
              Text(
                limit,
                style:
                    TextStyle(color: Colors.black,fontSize: 16, fontWeight: FontWeight.w600),
              ),
              //期限
              GreyText(S.of(context).s_tenor),
            ],
          ),
        ],
      ),
    ),
  );
}

Widget CoinListWrap(context, {String bg, Widget child}) {
  return Container(
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: Colors.white,
          image: DecorationImage(
              alignment: Alignment(1.04, -1.04),
              image: AssetImage(bg),
              fit: BoxFit.scaleDown,
              scale: 3.5)),
      child: child);
}

class _InvestPageState extends State<InvestPage> {
  int _currentPageIndex = 0;
  String _CurDate = '1';

  void changeDate(c) {
    setState(() {
      _CurDate = c;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: RowBetween(
          children: [
            Image.asset(
              'assets/images/ic_online_service_white.png',
              width: 20,
            ),
            Row(
              children: [
                Text(
                  //指数
                  'BTC ' + S.of(context).index,
                  style: TextStyle(color: Colors.lightBlueAccent, fontSize: 15),
                ),
                Text(
                  ' \$' + AppUtil.formatNum(46367.36, point: 2),
                  style: TextStyle(color: Colors.white, fontSize: 15),
                ),
              ],
            )
          ],
        ),
        brightness: Brightness.dark,
        backgroundColor: Color(0xFF3D6CFF),
        elevation: 0,
      ),
      body: RefreshIndicator(
        onRefresh: () async {},
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.fromLTRB(0, 0, 0, 15.0),
                color: Color(0xFF3D6CFF),
                child: Column(
                  children: [
                    //投资记录
                    Text(
                      S.of(context).invest_record,
                      style: TextStyle(color: Colors.white),
                    ),
                    //no_invest 无在持投资
                    Text(
                      S.of(context).no_invest,
                      style: TextStyle(
                          color: Colors.white.withOpacity(0.6), fontSize: 13),
                    ),
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
                height: 110,
                color: Colors.white,
                child: Stack(
                  children: [
                    PageView(
                        onPageChanged: (int index) {
                          setState(() {
                            _currentPageIndex = index % 2;
                          });
                        },
                        children: [
                          Row(
                            children: [
                              CoinItemContainer(
                                  context, S.of(context).dual('BTC'),
                                  img:
                                      'assets/images/ic_product_list_dual_ccy_usd.png'),
                              CoinItemContainer(
                                  context, S.of(context).dual('BTC-U'),
                                  img:
                                      'assets/images/ic_product_list_dual_ccy_bch_usd.png'),
                              CoinItemContainer(
                                  context, S.of(context).dual('ETH'),
                                  img:
                                      'assets/images/ic_product_list_dual_ccy_eth.png'),
                              CoinItemContainer(
                                  context, S.of(context).dual('ETH-U'),
                                  img:
                                      'assets/images/ic_product_list_dual_ccy_eth_usd.png'),
                            ],
                          ),
                          Row(
                            children: [
                              CoinItemContainer(
                                  context, S.of(context).dual('BCH'),
                                  img:
                                      'assets/images/ic_product_list_dual_ccy_usd.png'),
                              CoinItemContainer(
                                  context, S.of(context).dual('BCH-U'),
                                  img:
                                      'assets/images/ic_product_list_dual_ccy_bch_usd.png'),
                            ],
                          )
                        ]),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Container(
                          child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: List.generate(2, (i) {
                          return Container(
                            margin: EdgeInsets.symmetric(horizontal: 5),
                            width: _currentPageIndex == i ? 20.0 : 10.0,
                            height: 2.5,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5.0),
                                color: _currentPageIndex == i
                                    ? Colors.blue
                                    : Colors.grey),
                          );
                        }).toList(),
                      )),
                    )
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
                child: Wrap(
                  runSpacing: 10,
                  children: [
                    CoinListWrap(
                      context,
                      bg: 'assets/images/ic_btc.png',
                      child: ColumnStart(
                        children: [
                          SizedBox(
                            height: 15,
                          ),
                          ProductHead(
                              //BTC双币
                              title: S.of(context).dual_coin('BTC'),
                              subTitle: '投入BTC，赚取稳健高收益BTC或USDC',
                              color: Colors.orange),

                          //
                          SizedBox(
                            height: 10,
                          ),
                          Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 15.0),
                            child: Column(
                              children: [
                                // tags
                                Row(
                                  children: [
                                    TagContainer(
                                        onPressed: () {
                                          changeDate('1');
                                        },
                                        text: '1 '+S.of(context).day,
                                        isActive:
                                            _CurDate == '1' ? true : false,
                                        color: Colors.orange),
                                    SizedBox(
                                      width: 8,
                                    ),
                                    TagContainer(
                                        onPressed: () {
                                          changeDate('8');
                                        },
                                        text: '8天',
                                        isActive:
                                            _CurDate == '8' ? true : false,
                                        color: Colors.orange),
                                    SizedBox(
                                      width: 8,
                                    ),
                                    TagContainer(
                                        onPressed: () {
                                          changeDate('15');
                                        },
                                        text: '15天',
                                        isActive:
                                            _CurDate == '15' ? true : false,
                                        color: Colors.orange),
                                    SizedBox(
                                      width: 8,
                                    ),
                                    TagContainer(
                                        onPressed: () {
                                          changeDate('other');
                                        },
                                        //other 其他
                                        text: S.of(context).other,
                                        isActive:
                                            _CurDate == 'other' ? true : false,
                                        color: Colors.orange),
                                  ],
                                ),
                                CoinOptionContainer(context,
                                    color: Colors.orange,
                                    profit: '43.8',
                                    pegged: '\$' + AppUtil.formatNum(59000),
                                    limit: '1 '+S.of(context).day, onTap: () {
                                  Navigator.pushNamed(
                                      context, '/double/detail');
                                }),
                                CoinOptionContainer(context,
                                    color: Colors.orange,
                                    profit: '146',
                                    pegged: '\$' + AppUtil.formatNum(58000),
                                    limit: '1 '+S.of(context).day, onTap: () {
                                  Navigator.pushNamed(
                                      context, '/double/detail');
                                }),
                                CoinOptionContainer(context,
                                    color: Colors.orange,
                                    profit: '262.8',
                                    pegged: '\$' + AppUtil.formatNum(58000),
                                    limit: '1 '+S.of(context).day, onTap: () {
                                  Navigator.pushNamed(
                                      context, '/double/detail');
                                }),
                              ],
                            ),
                          ),
                          FlatButton(
                              minWidth: MediaQuery.of(context).size.width,
                              onPressed: () {
                                Navigator.pushNamed(context, '/double/list');
                              },
                              child: Text(
                                //see_all 查看全部
                                S.of(context).see_all,
                                style: TextStyle(color: Colors.orangeAccent,fontSize:15,fontWeight: FontWeight.w600),
                              ))
                        ],
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
